<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.4.1.min.js"></script>
		<script>
		 $(function(){
			 
			$("#add").click(function(){
				let n=window.prompt("请输入一种新水果:");
				$("#fruit").append("<li>"+n+"</li>");
			}); 
			//绑定的事件新增元素无效
			$("#fruit li").bind({
							mouseover:function(){
								$(this).css("font-size","50px");
							},
							mouseout:function(){
								$(this).css("font-size","15px");
							}
			});
			
		 });
		</script>
	</head>
	<body>
		<h2>常见的水果</h2>
		<ul id="fruit">
			<li>桃子</li>
			<li>苹果</li>
			<li>香蕉</li>
			<li>柿子</li>
			<li>菠萝</li>
		</ul>
		<button type="button" id="add">添加一个</button>
	</body>
</html>
